<template>
	<view class="rewardbody">
		<view class="header">
			<view class="first">
				<uni-icons custom-prefix="back" type="back" color="white" size="30" @click="Black"></uni-icons>
				<view class="qiandao">
					签到
				</view>
				<view class=""></view>
			</view>
			<view class="second">
				<view class="second_left">
					<image :src="av_img" mode="" class="second_left_img"></image>
					<view class="">
						<view class="second_left_ft">
							已连续签到{{obj.coiled}}天
						</view>
						<view class="second_left_ft2">
							明日签到可获得{{obj.coiled == 7 ? data[0].tabi:data[obj.coiled].tabi}}他币
						</view>
					</view>
				</view>
				<view class="second_right">
					<image :src="tabimg" mode="" class="second_right_img"></image><text
						class="second_ft">{{obj.balance}}</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content_card">
				<view class="card_list">
					<view class="card_list_box">
						<view class="card_list_ft">
							连续签到领好礼
						</view>
						<view class="card_list_center">
							<view class="box" v-for="(item,index) in data" :key="index"
								:style="{width: index == 6 ? '312rpx' : '136rpx',background:item.bgcolor}" @click="btnclick(item)">
								<view class="box_top_ft" v-show="index != 6" :style="{color:item.color}">
									第{{item.id}}天
								</view>
								<image :src="index != 6 ? item.tabimg : ''" mode="" class="box-centet_img"></image>
								<view class="box_bt_ft" v-show="index != 6" :style="{color:item.ftcolor}">
									{{item.tabi}}他币
								</view>
								<view class="seven">
									<view class="box_top_ft sevent_ft" v-show="index == 6">
										<view class="seven_day" :style="{color:item.color}">
											第{{item.id}}天
										</view>
										<image :src="index == 6 ? item.tabimg : ''" mode=""
											class="box-centet_img sevenimg"></image>
										<view class="box_bt_ft seven_tabi" :style="{color:item.ftcolor}">
											{{item.tabi}}他币
										</view>
									</view>
									<image class="seven_img" v-show="index == 6" :src="kajuanimg" mode="">
									</image>
								</view>
							</view>
						</view>
						<view class="qdbtn" @click="Reward"
							:style="{backgroundColor:iswhether == true ? '#FF7F22;' : '#d4d3cd;'}">
							{{iswhether == true ? '签到' : '已签到'}}
						</view>
					</view>
				</view>
				<view class="tasks" style="display:none;">
					<view class="date_task">
						日常任务
					</view>
					<view class="task_ft">
						<view class="detail" v-for="(item,index) in arr" :key='index'>

							<view class="detail_img_ft">
								<image :src="item.img" mode="" class="task_ft_img"></image>
								<view class="font">
									<view class="item_title">{{item.taskName}}
										<image :src="tabimg" mode="" class="item_title_img"></image> <text
											class="nums">+{{item.rewardNumber}}</text>
									</view>
									<view class="item_content">{{item.taskDetails}}</view>
								</view>
							</view>
							<view class="">
								<button class="complete" :style="{opacity:item.whether == true ? '0.5' : '1'}"
									@click="publish(index,item.whether)">{{item.whether == false ? '去发布' : '已完成'}}</button>
							</view>

						</view>
					</view>
				</view>
				<view class="footer">
					<view class="footer_txt">
						<view class="guize">
							签到规则
						</view>
						<view  class="ft">
							<rich-text :nodes="rules" style="line-height: 60rpx;"></rich-text>
						</view>
		<!-- 				<view class="ft">
							1.签到一天可获得10他币。
						</view> -->
						<!-- 			<view class="ft">
							2.连续签到7天可获得“免费一对一咨询券”或“免费语音文字咨询券”。
						</view> -->
					<!-- 	<view class="ft">
							2.连续签到7天,奖励将进入下一个循环,你的签到天数我们会持续记录。
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseURL,
		imgBaseUrl
	} from '@/utils/baseUrl.js'
	import {
		busSignDetailsqueryById,
		busSignDetailsadd,
		busSignRulelist
	} from '@/utils/OnetoOneaApi.js';
	import {
		busTasklist
	} from '@/utils/myapi.js';
	export default {
		data() {
			return {
				av_img: '',
				flag: true,
				tabimg: imgBaseUrl + '/img/wshing/tabi.png',
				kajuanimg: imgBaseUrl + '/img/missimg/kaquan.png',
				data: [{
					id: '1',
					tabi: '',
					tabimg: imgBaseUrl + '/img/wshing/tabi.png',
					bgcolor: '#F5F6FA',
					color: '',
					ftcolor: ''
				}, {
					id: '2',
					tabi: '',
					tabimg: imgBaseUrl + '/img/wshing/tabi.png',
					bgcolor: '#F5F6FA',
					color: '',
					ftcolor: ''
				}, {
					id: '3',
					tabi: '',
					tabimg: imgBaseUrl + '/img/wshing/tabi.png',
					bgcolor: '#F5F6FA',
					color: '',
					ftcolor: ''
				}, {
					id: '4',
					tabi: '',
					tabimg: imgBaseUrl + '/img/wshing/tabi.png',
					bgcolor: '#F5F6FA',
					color: '',
					ftcolor: ''
				}, {
					id: '5',
					tabi: '',
					tabimg: imgBaseUrl + '/img/wshing/tabi.png',
					bgcolor: '#F5F6FA',
					color: '',
					ftcolor: ''
				}, {
					id: '6',
					tabi: '',
					tabimg: imgBaseUrl + '/img/wshing/tabi.png',
					bgcolor: '',
					color: '',
					ftcolor: ''
				}, {
					id: '7',
					tabi: '',
					tabimg: imgBaseUrl + '/img/wshing/tabi.png',
					bgcolor: '',
					color: '',
					ftcolor: ''
				}],
				arr: [],
				iswhether: '',
				obj: {
					day: 0,
					balance: 0
				},
				pageNo: 1,
				rewardNumber: '',
				rewardType: 0,
				isbtn: false,
				rules:''
			}
		},
		onLoad() {
			this.datalist()
			this.BuTask()
			// const userInfo = uni.getStorageSync('userInfo')
			// console.log(userInfo.id);
			
		},
		created(){
			this.tabilist()
		},
		methods: {
			btnclick(item){
				console.log(item,'item');
			},
			//获取他币数量
			async tabilist() {
				const res = await busSignRulelist()
				const nums = res.result.records[0]
				this.rules = nums.rules
				this.data[0].tabi = nums.oneDayNumber
				this.data[1].tabi = nums.twoDayNumber
				this.data[2].tabi = nums.threeDayNumber
				this.data[3].tabi = nums.fourDayNumber
				this.data[4].tabi = nums.fiveDayNumber
				this.data[5].tabi = nums.sixDayNumber
				this.data[6].tabi = nums.sevenDayNumber


			},
			//获取签到信息
			async datalist() {
				// 创建一个 Date 对象
				var today = new Date();
				// 获取年、月、日、时、分、秒
				var year = today.getFullYear();
				var month = today.getMonth() + 1; // 月份是从 0 开始计数的，需要加1
				var day = today.getDate();
				var hours = today.getHours();
				var minutes = today.getMinutes();
				var seconds = today.getSeconds();

				// 格式化输出
				var formattedTime =
					year +
					"-" +
					(month < 10 ? "0" : "") +
					month +
					"-" +
					(day < 10 ? "0" : "") +
					day
				const userInfo = uni.getStorageSync('userInfo')
				this.av_img = userInfo.avatar == null ? 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300' :
					userInfo.avatar
				const res = await busSignDetailsqueryById()
				this.obj = res.result
				const days = res.result.day
				const oldtime = res.result.lastSignTime
				this.iswhether = res.result.whether
				console.log(this.data)
				for (let i = 0; i < this.data.length; i++) {
					if (oldtime < formattedTime) {
						if (this.data[i].id == days + 1) {
							this.data[i].bgcolor = '#FF7F22'
							this.data[i].color = '#FFFFFF'
							this.data[i].ftcolor = '#FFFFFF'
							this.rewardNumber = this.data[i].tabi
						}
						if (this.data[i].id <= days) {
							this.data[i].bgcolor = '#FFFFD2'
							this.data[i].color = '#333333'
							this.data[i].ftcolor = '#99999'
						}
					} else if (this.data[i].id <= days || days == 0) {
						this.data[i].bgcolor = '#FFFFD2'
						this.data[i].color = '#333333'
						this.data[i].ftcolor = '#99999'
					}
				}
			},
			async Reward() {
				this.isbtn = true
				// this.iswhether = true
				console.log(this.rewardNumber, 'this.rewardNumber');

				if (this.iswhether == true) {
					if (this.flag) {
						this.flag = false
						let params = {
							rewardNumber: this.rewardNumber,
							rewardType: this.rewardType
						}
						const res = await busSignDetailsadd(params)
						if (res.code == 200) {
							this.datalist()

							for (let i = 0; i < this.data.length; i++) {

								if (this.data[i].id == this.obj.day) {
									this.data[i].bgcolor = '#F5F6FA'
									this.data[i].color = '#333333'
									this.data[i].ftcolor = '#999999'
								}
							}
							uni.showToast({
								title: '签到成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				} else {
					uni.showToast({
						title: '今天您已签到！',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			},
			async BuTask() {
				const res = await busTasklist(this.pageNo)
				this.arr = res.result.records
				this.arr[0]['img'] = imgBaseUrl + '/img/missimg/zhuce_icon.png'
				this.arr[1]['img'] = imgBaseUrl + '/img/missimg/tiezi_icon.png'
				this.arr[2]['img'] = imgBaseUrl + '/img/missimg/yuanwang_icon.png'
				this.arr[3]['img'] = imgBaseUrl + '/img/missimg/yaogua_icon.png'
			},
			publish(index, whether) {
				console.log(index)
				if (index == 0 && whether == false) {
					uni.showToast({
						title: '暂无该页面',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
				} else if (index == 1 && whether == false) {
					const status = 5
					uni.navigateTo({
						url: `../../../subPackagesA/pages/addForum/addForum?status=${status}`
					})
				} else if (index == 2 && whether == false) {
					const status = 2
					uni.navigateTo({
						url: `../../../subPackagesA/pages/wshingwell/wshingwell?status=${status}`
					})
				} else if (index == 3 && whether == false) {
					const status = 3
					uni.navigateTo({
						url: `../../../subPackagesA/pages/divination/divination?status=${status}`
					})
				}
			},
			//返回上一页
			Black() {
				uni.reLaunch({
					url: '../../../pages/tabbar/my/my'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.rewardbody {
		width: 100%;
		// height: 100vh;
		background: #F5F5F5;

		.header {
			width: 100%;
			height: 518rpx;
			background: linear-gradient(90deg, #FFA725 0%, #FF7F22 100%);
			border-radius: 0px 0px 0px 0px;
			opacity: 1;

			.first {
				display: flex;
				justify-content: space-between;
				padding: 112rpx 25rpx 0 25rpx;

				.qiandao {
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.second {
				padding: 30rpx 25rpx 30rpx 25rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.second_left {
					display: flex;
					// width: 384rpx;
					justify-content: space-between;

					.second_left_img {
						width: 112rpx;
						height: 112rpx;
						border-radius: 50%;
						opacity: 1;
					}

					.second_left_ft {
						font-size: 36rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin-top: 10rpx;
					}

					.second_left_ft2 {
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin-top: 10rpx;
					}
				}

				.second_right {
					width: 162rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					opacity: 1;
					border: 1px solid #FFFFFF;
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;

					.second_right_img {
						width: 48rpx;
						height: 48rpx;
						vertical-align: middle;
						border-radius: 50%;
					}

					.second_ft {
						margin-left: 10rpx;
					}
				}
			}
		}

		.content {
			display: flex;
			justify-content: center;

			.content_card {
				width: 94%;

				.card_list {
					height: 595rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					margin-top: -180rpx;

					.card_list_box {
						padding: 20rpx;

						.card_list_ft {
							font-size: 30rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						.card_list_center {
							padding-top: 10rpx;
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;

							.box {
								width: 136rpx;
								height: 156rpx;
								background: #F5F6FA;
								border-radius: 12rpx 12rpx 12rpx 12rpx;
								opacity: 1;
								display: flex;
								flex-direction: column;
								justify-content: space-around;
								align-items: center;
								margin-top: 20rpx;

								.box_top_ft {
									font-size: 24rpx;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
									color: #333333;
								}

								.box-centet_img {
									width: 48rpx;
									height: 48rpx;
								}

								.sevenimg {
									margin-top: 6rpx;
								}

								.box_bt_ft {
									font-size: 24rpx;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: 500;
									color: #999999;
								}

								.seven {
									display: flex;

									.sevent_ft {
										height: 158rpx;

										.seven_day {
											line-height: 45rpx;
										}

										.seven_tabi {
											width: 133rpx;
											margin-top: 3rpx;
											line-height: 34rpx;
										}
									}

									.seven_img {
										width: 110rpx;
										height: 110rpx;
										margin-top: 25rpx;
									}
								}
							}
						}

						.qdbtn {
							text-align: center;
							height: 88rpx;
							line-height: 88rpx;
							background: #FF7F22;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							opacity: 1;
							font-size: 32rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
							margin-top: 60rpx;
						}
					}
				}


				.tasks {
					height: 580rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					margin-top: 20rpx;

					.date_task {
						padding: 30rpx 25rpx 20rpx 25rpx;
						font-size: 36rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222229;
					}

					.task_ft {
						padding: 10rpx 25rpx 20rpx 25rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 420rpx;

						.detail {
							display: flex;
							justify-content: space-between;

							.detail_img_ft {
								display: flex;
								align-items: center;

								.task_ft_img {
									width: 60rpx;
									height: 60rpx;
								}

								.font {
									margin-left: 15rpx;
									line-height: 40rpx;

									.item_title {
										font-size: 30rpx;
										font-family: PingFang SC-Medium, PingFang SC;
										font-weight: 500;
										color: #333333;
										display: flex;
										align-items: center;

										.item_title_img {
											width: 28rpx;
											height: 28rpx;
											margin-left: 10rpx;
										}

										.nums {
											font-size: 28rpx;
											font-family: PingFang SC-Medium, PingFang SC;
											font-weight: 500;
											color: #FF8B25;
											margin-left: 10rpx;
										}
									}

									.item_content {
										font-size: 24rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: 400;
										color: #999999;
									}
								}
							}

							.complete {
								width: 144rpx;
								height: 60rpx;
								line-height: 60rpx;
								font-size: 30rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
								background: #FF7F22;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								opacity: 1;
							}
						}

					}
				}

				.footer {
					height: 366rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					margin-top: 20rpx;

					.footer_txt {
						padding: 25rpx 20rpx 0 25rpx;
						.guize {
							font-size: 36rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222229;
						}

						.ft {
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #666666;
							margin-top: 22rpx;
							line-height: 36rpx;
						}
					}
				}
			}
		}
	}
</style>